<template>
    <div class="paihang">
        <div style="">
          <blur :blur-amount=10 :height="120" :url="url">
            <p class="center">
                <img :src="'http://192.168.13.196:2200/upload/'+userinfo.avatar">
                <p style="text-align: center;color:white">
                    ID:{{userinfo.username}}
                </p>
            </p>
          </blur>
          <flexbox :gutter="0">
            <flexbox-item v-for="(img, index) in images" :key="index"><img :src="img" style="width:100%" @click="url = img"/></flexbox-item>
          </flexbox>
          <p style="text-align: center;">
              <b>粉丝</b>
              <span>{{userinfo.be_followed}}</span>·
              <b>关注</b>
              <span>{{userinfo.follows}}</span>
          </p>
          <p style="text-align: center;margin-top:15px;color:#aaa">
              “<span>{{userinfo.motto}}</span>”
          </p>
          <p style="overflow: hidden;margin: 0 15px; border-bottom: solid 0.1px #ccc;padding-bottom:15px;">
              <span style="float:left;font-size:17px;color:#aaa;">
                  <i class="fa fa-thumbs-o-up"></i>
                  1
                  <i class="fa fa-smile-o"></i>
                  1
              </span>
              <a :href="'#/uset/'+userinfo._id">
                <button :name="userinfo._id" type="submit" style="color:white;float:right;
              border:none;background:#12a7b4;border-radius: 10%;
              font-size:12px;padding:3px 10px">
                  修改资料
              </button>
              </a>
          </p>
          <!-- 自带层级 -->
          <div>
            <sticky  :check-sticky-support="false" :offset="46">
               <tab :line-width="1" v-model="index0">
                <tab-item :selected="demo4 === item" v-for="(item, index) in list4" @click="demo4 = item" :key="index">{{item}}</tab-item>
              </tab>
            </sticky>
            <transition name="fade">
              <div v-if="show1===list4[index0]" style="height:100%;">
                <tab :line-width='2' active-color='#fc378c' v-model="index">
                   <tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2" @click="demo2 = item" :key="index">{{item}}</tab-item>
                </tab>
                <!-- =======评价========= -->
                <div v-if="show5 === list2[index]" style="padding-bottom:30px;margin:1% auto; box-shadow: -1px -1px 5px #aaa;width:99%;">
                    <div style="font-size:12px;">
                        <ul v-for="(item,index) in replys" style="padding:0 0;">
                         <li>
                           <p style="overflow: hidden; box-shadow: -1px -1px 5px #12a7b4;">
                             <span style="float:left;margin:5px">
                               评价了游戏
                             </span>
                             <span style="float:right;margin:5px">
                               {{item.create_time.substring(0,10)}}
                             </span>
                           </p>
                            <p style="margin:10px;font-size:16px;">
                              <!-- {{item.content}} -->
                              <a href="">
                                <img src="/static/3.png" style="width:10%" alt="">
                                <span>游戏名字</span>
                              </a>
                            </p>
                            <p style="margin-left:15%;font-size:16px;">
                              {{item.content}}
                            </p>
                            <p style="text-align: right;">
                              <button :name="item._id"  style="border:none;background: #12a7b4;color:white">删除</button>
                              <span style="margin-right:5px">
                                <a href="">
                                  <i class="fa fa-smile-o"></i>
                                 欢乐
                                </a>
                              </span>
                              <a href="" style="margin-right:5px">
                                <i class="fa fa-mail-forward"></i>
                              </a>
                              <i style="margin-right:5px">
                                <a href="">
                                  回复
                                </a>
                              </i>
                            </p>
                         </li>
                       </ul>
                    </div>
                </div>
                <!-- ========玩过======= -->
                <div v-if="show6 === list2[index]" style="padding-bottom:30px;margin:1% auto; box-shadow: -1px -1px 5px #aaa;width:99%;">
                       <ul style="padding:0 0;" v-for="(item,index) in game">
                         <li style="width:50%;padding:5px;float:left;box-shadow: -1px -1px 5px #aaa;">
                           <p>
                             <a :href="'#/game/'+item.gameid">
                               <img :src="'http://192.168.13.196:2200/images/'+item.gameer_bimg[1]" style="width:100%" alt="">
                             </a>
                           </p>
                           <p style="text-align: center;">{{item.gamename}}</p>
                           <p style=" border-top: solid 1px #aaa;overflow: hidden;">
                             <span style="float:left">
                               评分：8
                             </span>
                             <span style="float:right">
                               *****
                             </span>
                           </p>
                         </li>
                       </ul>
                </div>
                <!-- ==========购买========== -->
                <div v-if="show7 === list2[index]" style="margin:1% auto; box-shadow: -1px -1px 5px #aaa;;width:95%;">
                  <div style="">
                     <divider>{{ $t('此页比【玩过】多一个判断，时间紧迫，忘原谅')}}</divider>
                  </div>
                </div>
                <!-- =============收藏============ -->
                <div v-if="show8 === list2[index]" style="margin:1% auto; box-shadow: -1px -1px 5px #aaa;;width:95%;">
                  <div style="">
                      <ul style="padding:0 0;" v-for="(item,index) in article">
                        <li style="width:50%;padding:5px;box-shadow: -1px -1px 5px #aaa;">
                          <a :href="'#/reply/'+item._id"><h3 style="margin:0 0;">{{item.title}}</h3></a>
                          <p style=" border-top: solid 1px #aaa;overflow: hidden;">
                            <span style="float:left">
                              回复：{{item.comment_num}}
                            </span>
                            <span  style="float:right">
                              点击：{{item.click_num}}
                            </span>
                          </p>
                        </li>
                      </ul>
                  </div>
                </div>
                <!-- ================= -->
              </div>
            </transition>
            <transition name="fade">
              <div v-if="show2===list4[index0]">
                <ul style="padding: 0 0" v-for="(item,index) in articles">
                  <li>
                    <p style="padding-left:15px">
                      <a :href="'#/reply/'+item._id" >
                        {{item.title}}
                      </a>
                    </p>
                    <p style="padding-left:15px">
                      {{item.content}}
                    </p>
                    <button @click="deel" style="margin-left:15px;border: solid 1px #12a7b4;" :name="item._id">删除</button>
                     <divider>{{ $t('==================================')}}</divider>
                  </li>
                </ul>
              </div>
            </transition>
          </div>
       </div>
    </div>
</template>
<script>
import { Flexbox, FlexboxItem, Blur, Tab, TabItem, Sticky, Divider } from "vux";
const list = () => ["评价", "玩过", "购买", "收藏"];
export default {
  components: {
    Blur,
    Flexbox,
    FlexboxItem,
    Tab,
    TabItem,
    Sticky,
    Divider
  },
  data() {
    return {
      images: [
        "https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg",
        "https://o3e85j0cv.qnssl.com/waterway-107810__340.jpg",
        "https://o3e85j0cv.qnssl.com/hot-chocolate-1068703__340.jpg"
      ],
      url: "http://192.168.13.196:2200/upload/img-1510409985081.png",
      userinfo: {},
      list4: ["游戏", "帖子"],
      demo4: "游戏",
      show1: "游戏",
      show2: "帖子",
      index: 0,
      index0: 0,
      list2: list(),
      demo2: "评价",
      show5: "评价",
      show6: "玩过",
      show7: "购买",
      show8: "收藏",
      replys: "",
      game: "",
      article: "",
      articles: ""
    };
  },
  methods: {
    deel: function(ev) {
      // ========删除当前收藏文章=============
      ev.preventDefault();
      var value = ev.currentTarget.name;
      this.$axios
        .post("/top/deeeel", {
          ids: value
        })
        .then(data => {
          console.log(data);
          if (data.data.error == 0) {
            alert(data.data.message);
          } else {
            alert(data.data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
      console.log(value);
    }
  },
  mounted: function() {
    var that = this;
    var ids = this.$route.params;
    this.$axios
      .post("/top/mei", {
        ids: ids
      })
      .then(data => {
        if (data.data.error == 1) {
          alert(data.data.message);
        }
        if (data.data.error == 2) {
          alert(data.data.message);
        }
        // console.log(data.data.data);
        that.userinfo = data.data.data.user;
        // console.log(that.reply);
        that.replys = data.data.data.reply;
        that.game = data.data.data.game;
        that.article = data.data.data.article;
        that.articles = data.data.data.articles;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style lang="less" scoped>
@import "~vux/src/styles/1px.less";
@import "~vux/src/styles/center.less";
.setp li {
  margin: 2% 0;
  padding: 2% 0;
  width: 25%;
  float: left;
  border-right: solid 2px #ccc;
  text-align: center;
  box-shadow: -1px -1px 5px #aaa;
  cursor: pointer;
}
.setp {
  // overflow: hidden;
}
li {
  list-style: none;
}
.center {
  text-align: center;
  padding-top: 20px;
  color: #fff;
  font-size: 18px;
}
.center img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px solid #ececec;
  // border: solid 1px #aaa
}
.paihang {
  /* margin-top: 77px; */
  position: relative;
  /* overflow: hidden; */
  top: 0;
  z-index: 999999;
}

.fade-enter {
  opacity: 0;
  transform: translatex(-200px);
}

/* 显示/消失过程中的过渡样式 */

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-leave-to {
  opacity: 0;
  transform: translatex(200px);
}
/* 定义标签离开之后的结束状态 */
</style>
